<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<link rel="stylesheet" href="../../static/css/bootstrap.css">
	<script src="../../static/js/jquery-3.4.1.min.js"></script>
	<script src="../../static/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="../../static/css/main.css">
</head>
<body>
<div class="container">
	<div class="row">
		<!-- 导航栏 -->
		<div class="header" style="margin-top: 2%;">
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<div class="row">
			<div class="col-md-10">
				<ul class="nav nav-pills">
					<li role="presentation" class="active"><a href="/index/">首页</a></li>
					<li role="presentation">
						<a class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false">
							消息热点 <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
							<li role="presentation"><a href="/news/">今日焦点</a></li>
							<li role="presentation"><a href="/newcar/">新车速递</a></li>
							<li role="presentation"><a href="#">行业动态</a></li>
							<li role="presentation"><a href="#">车辆评测</a></li>
						  </ul>
					</li>
					<li role="presentation"><a href="/aboutcar/">关于汽车</a></li>
					<li role="presentation"><a href="#">降价</a></li>
					<li role="presentation"><a href="#">地区销售详细</a></li>
					<li role="presentation"><a href="#">经销商</a></li>
					<li role="presentation"><a href="/publicpraise/">口碑</a></li>
			  	</ul>
			</div>
			<div class="col-md-2 hidden-sm hidden-xs">
				<div class="user_pic">
					<a href="/user/">
						<img src="../../static/img/202071322312980333.jpg" alt="" >
						<div class="about_me">关于我</div>
					</a>
				</div>
			</div>

			</div>

		</div>	
		</div>



	</div>



    <div class="container" style="margin-top: 4%;">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                <div class="col-md-2" style="overflow-y: scroll; height: 500px;">
                      <button class="btn btn-success">车名</button>
                      <div class="list-group" style="margin-top: 2%;">
                        {% for i in car %}
                        <a href="#" class="list-group-item car-link" data-car-type="{{ i.Cartype }}" data-car-id="{{ i.id }}" >
                          {{ i.Carname }}
                        </a>
                        {% endfor %}
                      </div>
                    </div>

                    <div class="col-md-6">
                        <div>
                            <div>
                             <button class="btn btn-info">汽车信息</button>
                        <div class="jumbotron" style="margin-top: 2%;">
                            <h1></h1>
                            <p>...</p>
                            <p><a class="btn btn-primary btn-lg learn_more" href="#" role="button">Learn more</a></p>
                                <form action="/aboutcar/" method="post">
                                     {% csrf_token %}
                                     <input type="hidden" name="carID" value="">
                                 <p><a class="btn btn-success btn-lg" role="button">收藏</a></p>
                                </form>
                          </div>
                            </div><br>

                        <div>

                       <div class="jumbotron">
                            <div style="display: inline-block;">
                                <ul style="list-style: none; display: flex; flex-direction: column;">
                                    <li style="text-align: left;">
                                        <h4 style="font-size: 14px; font-weight: bold; overflow: hidden;"><a href="{% url 'cardetail' %}">名字</a>
                                        <i style="color: red;">爆款</i>
                                        </h4>

                                        <div style="display: block;">
                                            <span>报价</span>
                                            <span>评分</span>
                                            <span>口碑</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>


                        </div>
                        </div>

                    </div>


                    <div class="col-md-4">
                        <button class="btn btn-warning">评分</button>
                        <div class="page-header" style="margin-top: 2%;">
                            <h1>Example page header <small>Subtext for header</small></h1>
                          </div>

                    </div>

                </div>
            </div>
        </div>
    </div>


	
</div>

<script>
$(function() {
  // 给所有汽车链接绑定点击事件
  $('.car-link').click(function(e) {
    e.preventDefault();
    // 获取当前链接对应的汽车类型
    var carType = $(this).data('car-type');
    var carID = $(this).data('car-id')
    // 在 jumbotron 中显示汽车信息

    $('input[name="carID"]').val(carID);
    $('.jumbotron h1').text(carType);
  });
});




</script>
</body>
</html>